<template>


  <div>
    <van-nav-bar
        title="编辑首页内容"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <van-form @submit="onSubmit">
      <van-field
          v-model="value"
          name="title"
          label="标题"
          placeholder="标题"
          :rules="[{ required: true, message: '请填写首页标题~' }]"
      />
      <van-field
          v-model="value"
          name="desc"
          label="描述1"
          placeholder="描述"
          :rules="[]"
      />
      <van-field
          v-model="value"
          name="desc"
          label="描述2"
          placeholder="描述"
          :rules="[]"
      />
      <van-field
          v-model="value"
          name="desc"
          label="描述3"
          placeholder="描述"
          :rules="[]"
      />

      <van-field name="stepper" label="新增描述">
        <template #input>
          <van-stepper v-model="stepper" />
        </template>
      </van-field>
      <van-field name="uploader" label="宣传图">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from 'vue';
import {Form, Field, NavBar, Toast,Uploader,Stepper} from 'vant';
Vue.use(Form);
Vue.use(Field);
Vue.use(NavBar);
Vue.use(Uploader);
Vue.use(Stepper);
export default {
  name: "ManageIndexPage",
  data(){
    return {
      activeNames: [],
      stepper:1,
      value:'',
      uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
      title:'',//标题
      content_lines:[],//描述
      banners:[],//图片
      downloads:[],//下载链接以及图片
    }
  },
  methods:{
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
    onSubmit(values) {
      console.log('submit', values);
    },
  },created() {
    this.$cloudbase
        .callFunction({
          name: "get-profiles"
        })
        .then(res => {
          console.log(res );
        });
  }
}
</script>

<style scoped>

</style>